<template>
  <div
    class="home"
    :style="{ backgroundImage: `url(${isMobile ? require(`@/assets/images/bg-phone-min.jpg`) : require(`@/assets/images/bg_pc.png`)})` }"
  >
    <!-- <component class="map" :key="cp" :is="cp"/> -->
    
    <vMap class="map" v-if="select==1"/>
    <vMap2 class="map" v-if="select==2"/>
    <!-- <vMapb1 class="map" v-else  /> -->
  

    <!-- <div
      @click.stop="fActive = false"
      v-if="isMobile && (fActive || tipsActive)"
      class="mask"
    ></div> -->


  </div>
</template>

<script>
// @ is an alias to /src
import map from "@/components/map.vue";
import map2 from "@/components/map2.vue";
import mapb1 from "@/components/mapb1.vue";
import browser from '@/utils/browser'

export default {
  name: "Home",
  props:['select'],
  components: {
    vMap: map,
    vMap2: map2,
    vMapb1: mapb1,
  },
  data() {
    return {
      isMobile: browser.mobile,
    };
  },
 
  computed: {
  },
  mounted() {
    
  },
};
</script>

<style lang="less" scoped>
.home {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  .logo {
    position: absolute;
    left: 30px;
    top: 50px;
    width: 390px;
    z-index: 90;
  }
  .map {
    width: 100%;
    height: 100%;
    margin: 0;
  }

}

@media screen and (max-width: 500px) {
  .home {
    .tips {
      position: fixed;
      width: 88%;
      background: #fff;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
      border-radius: 4px;
      z-index: 999;
      > div {
        position: relative;
        width: 100%;
        padding: 20px;
        > p {
          font-weight: bold;
          margin-bottom: 10px;
        }
        > ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          > li {
            width: 48%;
            display: flex;
            align-items: center;
            margin: 10px 0;
            > i {
              min-width: 20px;
              height: 20px;
              display: inline-block;
              margin-right: 10px;
            }
          }
        }
        > img {
          position: absolute;
          right: 10px;
          width: 10px;
          top: 10px;
        }
      }
    }
    .bg {
      z-index: 0;
      position: fixed;
      width: 100%;
    }
    .logo {
      left: 50%;
      transform: translateX(-50%);
      top: 15px;
      width: 60%;
    }
    .mask {
      width: 100%;
      height: 100%;
      position: fixed;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.5);
      transition: 0.3s all ease;
      z-index: 98;
    }
    .fold-con {
      position: absolute;
      left: 0;
      bottom: -800px;
      width: 100%;
      transition: 0.3s all ease;
    }
    .fold-active {
      bottom: 0;
      z-index: 99;
      border-radius: 14px 14px 0px 0px;
    }

  
 
  }
}
</style>
